<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Checkbox - Indeterminate</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body onLoad="onLoad()">
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Checkbox - Indeterminate</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list-header>
          <ion-label> Native </ion-label>
        </ion-list-header>

        <div class="ion-padding-start">
          <!-- Default to unchecked -->
          <label for="unchecked">Unchecked</label>
          <input name="unchecked" id="unchecked" type="checkbox" />
          <br />

          <!-- Default to checked -->
          <label for="checked">Checked</label>
          <input name="checked" id="checked" type="checkbox" checked />
          <br />

          <!-- Default to indeterminate -->
          <label for="indeterminate">Indeterminate</label>
          <input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate" />
          <br />

          <!-- Default to checked / indeterminate -->
          <label for="both">Checked / Indeterminate</label>
          <input name="both" id="both" type="checkbox" checked class="indeterminate" />
          <br />
        </div>

        <ion-list-header>
          <ion-label> Ionic </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label>Unchecked</ion-label>
          <ion-checkbox slot="end"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Checked</ion-label>
          <ion-checkbox slot="end" checked></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Indeterminate</ion-label>
          <ion-checkbox slot="end" indeterminate></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Checked / Indeterminate</ion-label>
          <ion-checkbox slot="end" checked indeterminate></ion-checkbox>
        </ion-item>

        <ion-list-header>
          <ion-label> Colors </ion-label>
        </ion-list-header>
        <div class="ion-padding-start">
          <ion-checkbox aria-label="Default Indeterminate" indeterminate></ion-checkbox>
          <ion-checkbox aria-label="Secondary Indeterminate" indeterminate color="secondary"></ion-checkbox>
          <ion-checkbox aria-label="Tertiary Indeterminate" indeterminate color="tertiary"></ion-checkbox>
          <ion-checkbox aria-label="Success Indeterminate" indeterminate color="success"></ion-checkbox>
          <ion-checkbox aria-label="Warning Indeterminate" indeterminate color="warning"></ion-checkbox>
          <ion-checkbox aria-label="Danger Indeterminate" indeterminate color="danger"></ion-checkbox>
          <ion-checkbox aria-label="Dark Indeterminate" indeterminate color="dark"></ion-checkbox>
          <ion-checkbox aria-label="Medium Indeterminate" indeterminate color="medium"></ion-checkbox>
          <ion-checkbox aria-label="Light Indeterminate" indeterminate color="light"></ion-checkbox>
        </div>

        <ion-list-header>
          <ion-label> Parent </ion-label>
        </ion-list-header>

        <ul>
          <li>
            <ion-checkbox aria-labelledby="tall-label-0" indeterminate></ion-checkbox>
            <label id="tall-label-0">Tall Things</label>
            <ul>
              <li>
                <ion-checkbox aria-labelledby="tall-label-1" checked></ion-checkbox>
                <label id="tall-label-1">Skyscrapers</label>
              </li>
              <li>
                <ion-checkbox aria-labelledby="tall-label-2"></ion-checkbox>
                <label id="tall-label-2">Trees</label>
              </li>
              <li>
                <ion-checkbox aria-labelledby="tall-label-3"></ion-checkbox>
                <label id="tall-label-3">Giants</label>
              </li>
            </ul>
          </li>
        </ul>
      </ion-content>
    </ion-app>

    <style>
      ul {
        list-style: none;
        margin: 5px 20px;
        padding: 0;
      }

      li {
        margin: 10px 0;
      }

      ul label {
        display: inline-block;
        vertical-align: top;
        margin-top: 4px;
      }
    </style>

    <script>
      var indeterminateCheckboxes = document.getElementsByClassName('indeterminate');

      for (var i = 0; i < indeterminateCheckboxes.length; i++) {
        var checkbox = indeterminateCheckboxes[i];
        checkbox.indeterminate = true;
      }

      function onLoad() {
        var checkboxes = document.getElementsByTagName('ion-checkbox');

        for (var i = 0; i < checkboxes.length; i++) {
          var checkbox = checkboxes[i];
          checkbox.addEventListener('ionChange', function (event) {
            checkboxChanged(this, event);
          });
        }
      }

      function checkboxChanged(el, ev) {
        var isParent = el.id === 'tall';

        if (isParent) {
          checkChildren(el.checked);
        } else {
          checkParent();
        }
      }

      function checkParent() {
        var parent = document.getElementById('tall');
        var children = getChildren();
        var countChecked = 0;

        for (var i = 0; i < children.length; i++) {
          var child = children[i];
          if (child.checked) {
            countChecked = ++countChecked;
          }
        }

        // None checked, uncheck parent
        if (countChecked == 0) {
          parent.checked = false;
          parent.indeterminate = false;
          // All checked, check parent
        } else if (countChecked == children.length) {
          parent.checked = true;
          parent.indeterminate = false;
          // One checked, indeterminate parent
        } else {
          parent.indeterminate = true;
        }
      }

      function checkChildren(shouldCheck) {
        var children = getChildren();
        for (var i = 0; i < children.length; i++) {
          var child = children[i];
          child.checked = shouldCheck;
        }
      }

      function getChildren() {
        return document.querySelectorAll('ion-checkbox[name^=tall-]');
      }
    </script>
  </body>
</html>
